<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5"><el-input v-model="conditions.plan_title" placeholder="请输入平台计划名称" size="small"></el-input></el-col>
      <el-col :span="5"><el-input v-model="conditions.title" placeholder="请输入量表或组合名称" size="small"></el-input></el-col>
      <el-col :span="4"><el-button type="primary" size="small">搜索</el-button></el-col>
    </el-row>
    <el-row v-if="this.menuList.includes('storeEvaluation')" class="btnBox">
      <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addSchool">新增计划</el-button></el-col>
    </el-row>
    <div class="table">
      <el-table :data="tableData" :menuList="this.menuList" v-loading="tableConfig.load" :style="tableConfig.style" :max-height="tableConfig.maxHeight" :border=tableConfig.border :size="tableConfig.size">
        <el-table-column v-if="tableConfig.selection === true" type="selection" width="55"> </el-table-column>
          <template v-for="(item, index) of tableConfig.config">
            <el-table-column v-if="item.id === 'operation'" :key="index" :prop="item.id" :label="item.name" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
              <template slot-scope="scope">
                <el-button @click="examine('edit', scope.row)" v-if="scope.row.status_title !== '已结束' && menuList.includes('editEvaluation')" type="text" size="small">编辑</el-button>
                <el-button v-if="menuList.includes('progressEvaluation')" @click="examine('progress', scope.row)" type="text" size="small">测评进度</el-button>
                <el-button v-if="menuList.includes('copyEvaluation')" @click="examine('copy', scope.row)" type="text" size="small">复制</el-button>
                <el-button @click="examine('del', scope.row)" v-if="scope.row.status_title === '进行中' && menuList.includes('termination')" type="text" size="small">终止</el-button>
              </template>
            </el-table-column>
            <el-table-column v-else :label="item.name" :key="index" :prop="item.id" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :type="item.type"></el-table-column>
          </template>
      </el-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import {APIPLANLIST, APIPLANTERMINATIONPLAN} from '@/common/api.js'
export default {
  components: {
    simpleTable
  },
  data () {
    return {
      menuList: [],
      conditions: {
        plan_title: '',
        title: ''
      },
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'plan_title', name: '计划名称'},
          {id: 'title', name: '组合或量表名称'},
          {id: 'evaluated_number', name: '测评人次'},
          {id: 'completion_schedule', name: '完成进度（%）'},
          {id: 'gauge_number', name: '测评量表数量'},
          {id: 'question_number', name: '题量'},
          {id: 'status_title', name: '状态'},
          {id: 'start_time', name: '开始时间'},
          {id: 'end_time', name: '结束时间'},
          {id: 'operation', name: '操作'}
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.tableList()
  },
  methods: {
    tableList () {
      APIPLANLIST({
        plan_title: this.conditions.plan_title,
        title: this.conditions.title,
        page: this.page
      }).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.totalNumber
        this.currentPage = res.data.page
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    addSchool () {
      this.$router.push({path: '/addPlan'})
    },
    examine (id, val) {
      if (id === 'edit') {
        this.$router.push({path: '/editPlan', query: {id: val.id}})
      } else if (id === 'copy') {
        this.$router.push({path: '/editCopyPlan', query: {id: val.id}})
      } else if (id === 'progress') {
        this.$router.push({path: '/planProgress', query: {id: val.id}})
      } else if (id === 'del') {
        this.delFn(val.id)
      }
    },
    delFn (id) {
      APIPLANTERMINATIONPLAN({
        plan_id: id
      }).then((res) => {
        this.$message.success(res.msg)
        this.tableList()
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  }
}
</script>
